<template>
  <div class="app-container">
    <el-dialog
      v-model="dialogVisible"
      title="优惠券发放列表"
      width="80%"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      v-dialog-drag
    >
      <el-form
        ref="queryFormRef"
        :model="queryParams"
        label-width="80px"
        :inline="true"
        label-position="left"
      >
        <el-form-item>
          <span>优惠券名称: {{ name }}</span>
          <span style="margin-left: 10px">类型: {{ typeName }}</span>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="queryParams.subCode"
            placeholder="请输入用户优惠券编码"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryParams.mobile" placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
        <el-form-item class="search_btn">
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="list" v-loading="loading">
        <el-table-column label="优惠券编号" prop="couponCode" show-overflow-tooltip />
        <el-table-column label="使用条件" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="row.couponType == 3">满{{ row.thresholdAmount }}减{{ row.faceValue }}</span>
            <span v-if="row.couponType == 2">抵扣{{ row.freeHours }}小时</span>
            <span v-else>无门槛</span>
          </template>
        </el-table-column>
        <el-table-column label="有效期" align="center" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="row.lifespanType == 1">领券当日起{{ row.lifespanDay }}天内有效</div>
            <div class="leading-5" v-if="row.lifespanType == 2">
              {{ row.lifespanStartTime }}
              <p class="text-center">至</p>
              {{ row.lifespanEndTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户名" prop="nickName" show-overflow-tooltip />
        <el-table-column label="手机号" prop="mobile" show-overflow-tooltip />
        <el-table-column label="适用场馆" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="row.applyStadiumType === 3">指定场馆不可用</div>
            <div v-else-if="row.applyStadiumType === 2">指定场馆可用</div>
            <div v-else-if="row.applyStadiumType === 1">全部场馆可用</div>
          </template>
        </el-table-column>
        <el-table-column label="适用类型" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="row.applySportType === 3">指定类型不可用</div>
            <div v-else-if="row.applySportType === 2">指定类型可用</div>
            <div v-else-if="row.applySportType === 1">全部类型可用</div>
          </template>
        </el-table-column>
        <el-table-column label="发布渠道" width="90" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-for="item in dict?.type?.platform_type" :key="item.value">
              <div v-if="item.value == String(row.sourceType)">
                {{ item.label }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="领取状态" prop="couponStatus" width="90" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="row.state == '0' || row.state == '1'">已领取</div>
            <div v-else>未领取</div>
          </template>
        </el-table-column>
        <el-table-column label="使用状态" prop="couponStatus" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="row.state == '0'">未使用</div>
            <div v-else-if="row.state == '1'">已使用</div>
            <div v-else-if="row.state == '2'">已过期</div>
          </template>
        </el-table-column>
        <el-table-column label="领取时间" prop="createTime" width="160" show-overflow-tooltip />
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <div class="table_btn">
              <el-button type="text" class="primary_text" @click="handleUpdate(row)"
                >编辑
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="queryParams.total > 0"
        :total="queryParams.total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="updateDialogVisible"
      title="编辑优惠券"
      width="30%"
      :show-close="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      v-dialog-drag
    >
      <el-form ref="formRef" :model="form" label-width="100px" label-position="right">
        <el-form-item label="优惠券名称">
          <el-input
            v-model="form.name"
            placeholder="请输入优惠券名称"
            clearable
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="优惠券编码">
          <el-input
            v-model="form.couponCode"
            placeholder="请输入优惠券编码"
            clearable
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="form.faceValue" placeholder="请输入金额" clearable disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile" placeholder="请输入手机号" clearable disabled></el-input>
        </el-form-item>
        <el-form-item label="有效期">
          <div class="div_group">
            <el-radio v-model="form.lifespanType" :label="1" disabled>
              领券当日起
              <el-input
                style="width: 125px; margin: 0 12px"
                v-model="form.lifespanDay"
                type="number"
                placeholder="多少"
                :disabled="form.lifespanType != 1"
                clearable
              />
              天内有效
            </el-radio>
          </div>
          <div class="mt-4">
            <el-radio v-model="form.lifespanType" :label="2" disabled>
              <el-date-picker
                v-model="form.lifespanStartTime"
                clearable
                type="date"
                placeholder="开始时间"
                :disabled="form.lifespanType != 2"
                value-format="yyyy-MM-dd"
                style="margin-right: 18px; width: 145px"
              >
              </el-date-picker>
              <el-date-picker
                v-model="form.lifespanEndTime"
                clearable
                type="date"
                placeholder="截止时间"
                :disabled="form.lifespanType != 2"
                value-format="yyyy-MM-dd"
                style="width: 145px"
              >
              </el-date-picker>
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.state">
            <el-radio label="0">未使用</el-radio>
            <el-radio label="1">已使用</el-radio>
            <el-radio label="2">已过期</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitUpdateForm">确定</el-button>
          <el-button @click="handleUpdateClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { couponUserPage, updateCouponsUser } from '@/api/coupon/coupon'
import { useDict } from '@/utils/dict'
import { ElMessage } from 'element-plus'

// 字典数据
const { dict } = useDict({
  dicts: ['platform_type', 'discount_type'],
})

// 定义 emits
const emit = defineEmits(['refreshShow'])

// 定义响应式数据
const dialogVisible = ref(false)
const name = ref('')
const typeName = ref('')
const loading = ref(false)
const updateDialogVisible = ref(false)
const queryFormRef = ref()
const formRef = ref()

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  couponId: null as number | null,
  subCode: null as string | null,
  mobile: null as string | null,
})

const form = reactive({
  name: '',
  couponCode: '',
  faceValue: '',
  mobile: '',
  lifespanType: 1,
  lifespanDay: '',
  lifespanStartTime: '',
  lifespanEndTime: '',
  state: '0',
})

const list = ref<any[]>([])

// 加载数据
const init = (id: number, n: string, type: string) => {
  queryParams.couponId = id
  name.value = n
  typeName.value = type
  dialogVisible.value = true
  getList()
}

// 获取数据
const getList = () => {
  loading.value = true
  couponUserPage(queryParams)
    .then((res: any) => {
      queryParams.total = res.total
      list.value = res.rows
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

// 查询
const handleQuery = () => {
  getList()
}

// 关闭
const handleClose = () => {
  dialogVisible.value = false
  emit('refreshShow')
}

// 编辑
const handleUpdate = (row: any) => {
  Object.assign(form, JSON.parse(JSON.stringify(row)))
  form.state = row.state.toString()
  updateDialogVisible.value = true
}

// 关闭
const handleUpdateClose = () => {
  updateDialogVisible.value = false
}

// 确认
const submitUpdateForm = () => {
  if (form.lifespanType == 1) {
    if (form.lifespanDay == null || form.lifespanDay == '') {
      ElMessage.error('请填写有效期天数')
      return
    }
    if (Number(form.lifespanDay) == 0) {
      ElMessage.error('有效期天数不能为0')
      return
    }
  } else if (form.lifespanType == 2) {
    if (form.lifespanStartTime == null || form.lifespanStartTime == '') {
      ElMessage.error('请选择有效期开始时间')
      return
    }
    if (form.lifespanEndTime == null || form.lifespanEndTime == '') {
      ElMessage.error('请选择有效期结束时间')
      return
    }
  }
  updateCouponsUser(form)
    .then((res: any) => {
      ElMessage.success(res.msg)
      getList()
      updateDialogVisible.value = false
    })
    .catch(() => {})
}

// 暴露方法给父组件
defineExpose({
  init,
})
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
  .el-dialog__header {
    border-radius: 6px 6px 0 0;
    background: rgba(243, 244, 246, 1);
    padding: 12px 15px;
    .el-dialog__title {
      font-size: 14px;
      color: #383838;
    }
  }
  .el-dialog__body {
    padding-top: 13px;
    padding-bottom: 10px;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
  .el-table thead tr th.el-table__cell {
    padding: 10px 0;
  }
}
</style>
